<template>
  <div id="app">
    <el-card class="card">
      <el-page-header class="title" content="验证码找回" @back="$router.go(-1)"></el-page-header>
      <div class="DataForm">
        <el-form ref="ruleForm" :model="ruleForm" :rules="rules" class="demo-ruleForm" label-width="100px">
          <el-form-item label="手机号" prop="userPhone">
            <el-input v-model="ruleForm.userPhone" placeholder="输入你的手机号码"></el-input>
          </el-form-item>
          <el-form-item label="验证码" prop="code">
            <el-input v-model="ruleForm.code" class="input" placeholder="输入你收到的验证码"></el-input>
            <el-button :disabled="isDisabled" class="input1" type="primary" @click="sendMsg">{{ buttonName }}
            </el-button>
          </el-form-item>
          <el-form-item label="新密码" prop="userPassword">
            <el-input v-model="ruleForm.userPassword" placeholder="输入你的新密码" show-password></el-input>
          </el-form-item>
          <el-form-item label="请再次输入" prop="userPassword1">
            <el-input v-model="ruleForm.userPassword1" placeholder="请再次输入密码" show-password></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">修改密码</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "Retrieve",
  data() {
    return {
      ruleForm: {},
      isDisabled: false,
      time: 60,
      buttonName: "发送验证码",
      rules: {
        userPassword: [{required: true, message: '请设置密码', trigger: 'blur'}],
        userPassword1: [{required: true, message: '请再次输入密码', trigger: 'blur'}],
        userPhone: [
          {required: true, message: '请输入手机号', trigger: 'blur'},
          {min: 11, max: 11, message: '手机号为11位', trigger: 'blur'}],
        code: [{required: true, message: '请输入验证码', trigger: 'blur'}],
      },
    }
  },
  methods: {
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          this.$axios.post('/user/UpUserPaw', this.ruleForm).then((res) => {
            if (res.data.success) {
              this.$message.success({
                message: res.data.message,
                type: 'success'
              });
              this.ruleForm = '';
              this.$router.push('/login');
            } else {
              this.$message.warning({
                message: res.data.message,
                type: 'warning'
              });
            }
          })
        }
      })
    },
    sendMsg() {
      this.$axios.post("/user/verification", this.ruleForm).then((res) => {
        if (res.data.success) {
          let me = this;
          me.isDisabled = true;
          let interval = window.setInterval(function () {
            me.buttonName = me.time;
            --me.time;
            if (me.time < 0) {
              me.buttonName = "重新发送";
              me.time = 10;
              me.isDisabled = false;
              window.clearInterval(interval);
            }
          }, 1000);
        }
      })

    }
  },
}
</script>

<style scoped>

#app {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-image: url("../static/images/test.png");
}

.title {
  padding-bottom: 50px;
}

.DataForm {
  margin: 0 auto;
  width: 70%;
}

.card {
  width: 600px;
  margin: 200px auto;
}

.input {
  width: 60%;
}
</style>